<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p {
            margin: 8px;
            font-size:16px;
            height: fit-content;
            width: 200px;
            /*box-sizing: border-box;*/
            border: 5px solid #00B7FF;
            padding: 5px;
            background-color: #9e73ff;
        }
        .selected {
            color: yellow;
            width: 600px;
        }
        .highlight {
            width: 800px;
        }
    </style>
</head>
<body>
<p>点击获取元素宽度(inner包括padding，outer包括border（margin）</p>
<p class="selected">Hello</p>
<p>and</p>
<p class="highlight">Goodbye</p>

<script src="jquery-1.12.4.js" type="text/javascript"></script>
<script>
    $("p:first").append(function () {
        var content = '';
        content = content + "\tmargin: " + parseFloat($(this).css("margin"));
        content = content + "\tpadding: " + parseFloat($(this).css("padding"));
        $(this).append("<em>" + content + "</em>");
    });
    $("body").children().on("click", function() {
        var getWidth = $(this).width();
        var getInnerWidth = $(this).innerWidth();
        var getOuterWidth = $(this).outerWidth(true);
        $(this).append("<div>getWidth:" + getWidth + " getInnerWidth:" + getInnerWidth + " getOuterWidth:" + getOuterWidth + "</div>");
    })
</script>
</body>
</html>